<template>
  <UploadSelectModal :visible="dialogVisible" @confirmType="confirmType" />
  <UploadBookModal :visible="uploadBookVisible" @close="handleClose" />
  <UploadPDFModal :visible="uploadPDFVisible" @close="handleClose" />
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import UploadSelectModal from '@/components/UploadSelectModal.vue'
import UploadPDFModal from '@/components/UploadPDFModal.vue'
import UploadBookModal from '@/components/UploadBookModal.vue'

const router = useRouter()
const selectedType = ref('')
const dialogVisible = ref(false)
const uploadBookVisible = ref(false)
const uploadPDFVisible = ref(false)

function openModal() {
  selectedType.value = ''
  dialogVisible.value = true;
}
defineExpose({
  openModal 
})
function chooseFile(type) {
  selectedType.value = type
}

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
})

const confirmType = (data) => {
  console.log(data);
  selectedType.value = data;
  dialogVisible.value = false
  if(data == 'book'){
    uploadBookVisible.value = true
  }
  if(data == 'pdf'){
    uploadPDFVisible.value = true
  }
}

const handleClose = ()=>{
  dialogVisible.value = false;
  uploadBookVisible.value = false
  uploadPDFVisible.value = false
}

</script>

<style scoped>
.select-box{
  flex: 1;
  margin-left: 12px;
  padding: 24px;
  border: 1px solid #409BFF;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  border: 1px dashed #409BFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.select-box.selected {
  border: 2px solid #409BFF;
  font-size: 16px;
  /* background: #f0f7ff; */
}

</style>